<!DOCTYPE html>
<h1>Servers</h1>
<table class="ui very basic table">
    <thead>
        <tr>
            <th>Default</th>
            <th>Client</th>
            <th>IP Address</th>
            <th>Protocol</th>
            <th>Port</th>
            <th>Username</th>
            <th class="center aligned">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="server in settings.servers">
            <td class="collapsing">
                <div class="ui toggle checkbox">
                    <input type="checkbox" ng-model="server.default" ng-change="toggleDefaultServer(server)">
                    <label></label>
                </div>
            </td>
            <td>{{server.getName()}}</td>
            <td>{{server.ip}}</td>
            <td class="collapsing">
                <div ng-switch="server.proto">
                    <div class="" ng-switch-when="http">
                        <div class="ui label">
                            <i class="unlock alternate icon"></i> {{server.proto}}
                        </div>
                    </div>
                    <div class="" ng-switch-when="https">
                        <div class="ui label">
                            <i class="green lock icon"></i> {{server.proto}}
                        </div>
                    </div>
                    <div class="" ng-switch-default>
                        <div class="ui label">
                            <i class="help icon"></i> {{server.proto}}
                        </div>
                    </div>
                </div>
            </td>
            <td>{{server.port}}</td>
            <td>{{server.user}}</td>
            <td class="collapsing center aligned">
                <button ng-disabled="$first" class="circular green ui icon mini button" ng-click="moveServerUp(server)">
                    <i class="icon arrow up"></i>
                </button>
                <button class="circular blue ui icon mini button" ng-click="openRenameModal(server)">
                    <i class="icon tag"></i>
                </button>
                <button class="circular red ui icon mini button" ng-click="removeServer(server)">
                    <i class="icon remove"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

<modal
    title="Rename Server"
    approve="renameServer()"
    data="renameData"
    id="renameModal"
    template-url="./views/modals/rename.html">
</modal>